import CustomBlockquote from "@/components/Blockquote";
import DictTag, { DictValueEnum } from "@/components/DictTag";
import { getUser } from "@/services/api/module/system/user";
import { DownOutlined, UserOutlined } from "@ant-design/icons";
import { ProDescriptions } from "@ant-design/pro-components";
import {
	Avatar,
	Button,
	Drawer,
	Dropdown,
	Flex,
	MenuProps,
	Skeleton,
	Space,
	Table,
	Tabs,
	TabsProps,
	Tag,
	Typography
} from "antd";
import React, { useEffect, useState } from "react";
const UserDetails: React.FC<{
	open: boolean;
	currentId: undefined | number;
	title: string;
	onClose: () => void;
	sexOptions: DictValueEnum;
	statusOptions: DictValueEnum;
	useType: DictValueEnum;
}> = ({ open = false, sexOptions, statusOptions, useType, currentId = undefined, title = "用戶信息", onClose = () => {} }) => {
	const [useInfo, setUserInfo] = useState<any>({});
	const [postInfo, setPostInfo] = useState({});
	const [activeTab, setActiveTab] = useState("basis");
	const [loading, setLoading] = useState<boolean>(true);
	useEffect(() => {
		if (open && currentId) {
			setLoading(true);
			getUser(currentId)
				.then(data => {
					setUserInfo(data);
					setLoading(false);
				})
				.catch(() => {
					setLoading(false);
				});
		}
	}, [open, currentId]);
	const dropdowns: MenuProps["items"] = [
		{
			label: <a href="https://www.antgroup.com">1st menu item</a>,
			key: "0"
		},
		{
			label: <a href="https://www.aliyun.com">2nd menu item</a>,
			key: "1"
		},
		{
			type: "divider"
		},
		{
			label: "3rd menu item",
			key: "3"
		}
	];
	const onChange = (key: string) => {
		console.log(key);
	};
	const handleClose = () => {
		setActiveTab("basis");
		onClose();
	};
	const tabs: TabsProps["items"] = [
		{
			key: "basis",
			label: "基础信息",
			children: (
				<>
					<ProDescriptions
						column={1}
						loading={loading}
						layout="vertical"
						dataSource={useInfo.user}
						colon={false}
						emptyText={"空"}
						columns={[
							{
								title: "姓名",
								key: "realName",
								dataIndex: "realName"
							},
							{
								title: "账号",
								key: "userName",
								dataIndex: "userName"
							},
							{
								title: "别名",
								key: "nickName",
								dataIndex: "nickName"
							},
							{
								title: "性别",
								key: "sex",
								dataIndex: "sex",
								valueType: "select",
								valueEnum: sexOptions,
								render: (_, record) => {
									return <DictTag enums={sexOptions} value={record.sex} />;
								}
							},
							{
								title: "手机号",
								key: "phonenumber",
								dataIndex: "phonenumber"
							},
							{
								title: "邮箱",
								key: "email",
								dataIndex: "email"
							},
							{
								title: "出生年月",
								key: "birthday",
								dataIndex: "birthday",
								valueType: "date"
							},
							{
								title: "个性签名",
								key: "signature",
								dataIndex: "signature",
								valueType: "text"
							}
						]}
					></ProDescriptions>
				</>
			)
		},
		{
			key: "postion",
			label: "职位信息",
			children: (
				<>
					<ProDescriptions
						column={2}
						loading={loading}
						layout="vertical"
						dataSource={useInfo?.user}
						colon={false}
						emptyText={"空"}
						columns={[
							{
								title: "所属部门",
								key: "deptName",
								dataIndex: "deptName"
							},
							{
								title: "部门负责人",
								key: "leaderName",
								dataIndex: "leaderName"
							},
							{
								title: "负责人电话",
								key: "phone",
								dataIndex: "phone"
							},
							{
								title: "负责人邮箱",
								key: "email",
								dataIndex: "email"
							},
							{
								title: "担任职位",
								key: "postName",
								dataIndex: "postName",
								render: (_, record) => {
									return (
										<Space size={[1, 4]} wrap={true}>
											{record?.posts.map((item: any) => {
												return (
													<Tag color="default" key={item?.id}>
														{item?.name}
													</Tag>
												);
											})}
										</Space>
									);
								}
							}
						]}
					/>
				</>
			)
		},
		{
			key: "role",
			label: "角色信息",
			children: (
				<ProDescriptions
					column={2}
					loading={loading}
					layout="vertical"
					colon={false}
					dataSource={useInfo?.user}
					emptyText={"空"}
					columns={[
						{
							title: "角色名称",
							key: "roleName",
							dataIndex: "roleName",
							render: (_, record) => {
								return (
									<Space size={[1, 4]} wrap direction="horizontal" style={{ width: 600 }}>
										{useInfo?.roles?.map((item: any) => {
											return (
												<Tag color="default" key={item?.id}>
													{item?.roleName}
												</Tag>
											);
										})}
									</Space>
								);
							}
						}
					]}
				></ProDescriptions>
			)
		},
		{
			key: "other",
			label: "其他信息",
			children: (
				<ProDescriptions
					column={1}
					loading={loading}
					emptyText={"空"}
					dataSource={useInfo.user}
					columns={[
						{
							title: "用户类型",
							key: "userType",
							dataIndex: "userType",
							valueEnum: useType
						},
						{
							title: "最后登录IP",
							key: "loginIp",
							dataIndex: "loginIp"
						},
						{
							title: "最后登录地址",
							key: "finallyLoginAddress",
							dataIndex: "finallyLoginAddress"
						},
						{
							title: "最后登录时间",
							key: "loginDate",
							dataIndex: "loginDate"
						},
						{
							title: "备注",
							key: "remark",
							dataIndex: "remark"
						},
						{
							title: "注册时间",
							key: "createTime",
							dataIndex: "createTime"
						}
					]}
				/>
			)
		}
	];

	return (
		<>
			<Drawer title={title} width={600} placement={"right"} onClose={handleClose} closable={true} open={open}>
				<Flex justify={"space-between"} align="center">
					{loading ? (
						<Space align="center" size={10}>
							<Space align="center" size={10}>
								<Skeleton.Avatar active={true} size={60} shape={"circle"} />
								<Skeleton.Input active={true} size={"small"} />
							</Space>
							<Skeleton.Button active={true} size={"small"} />
						</Space>
					) : (
						<Space align="center" size={10}>
							<Space align="center" size={10}>
								{useInfo?.user?.avatar ? (
									<Avatar size={60} src={useInfo?.user?.avatar} />
								) : (
									<Avatar size={60} style={{ backgroundColor: "#2080f0", textAlign: "center", lineHeight: "35px" }}>
										{useInfo?.user.realName?.charAt(0).toUpperCase()}
									</Avatar>
								)}
								<Typography.Title style={{ marginBottom: 0 }} level={4}>
									{useInfo?.user?.realName}
								</Typography.Title>
							</Space>
							<DictTag enums={statusOptions} type="tag" value={useInfo?.user?.status} />
						</Space>
					)}
					<Dropdown menu={{ items: dropdowns }} trigger={["click"]}>
						<Button type="link">更多操作</Button>
					</Dropdown>
				</Flex>
				<Tabs defaultActiveKey={activeTab} items={tabs} onChange={onChange} />
			</Drawer>
		</>
	);
};
export default UserDetails;
